<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import {useRouter} from 'vue-router'
import {captcha,loginApi} from '../api/login'

const router = useRouter()

// 表单数据
const loginForm = ref({
  username: '',
  password: '',
  position: '1',
});

// 角色选项
const roleOptions = [
  { label: '管理员', value: '1' },
  { label: '咨询师', value: '2' }
];



const login = async () => {
  const result = await loginApi(loginForm.value);
  if (result.code === 200 && userInputCaptcha.value.trim().toUpperCase() === captchaText.value.trim().toUpperCase()) {//response.data 这是一个 JavaScript 对象，不是 JSON 字符串
    // 1. 提示信息
    ElMessage.success('登陆成功');
    // 2. 存储当前员工信息
    localStorage.setItem('loginUser', JSON.stringify(result.data));
    // 3. 跳转到页面
    router.push('/index');
  }else {
    ElMessage.error("账号密码验证码有错的")
  }
};

// 重置表单
const resetForm = () => {
  loginForm.value = {
    username: '',
    password: '',
    position: '',
  };
  captchaText.value = '';
};

//验证码
const userInputCaptcha = ref('');
const captchaImg = ref('');
const captchaText = ref('');

// 验证码刷新（占位）
const refreshCaptcha = async () => {
  const result =await captcha();
  if (result.code === 200){//成功
    captchaImg.value = result.data.captchaImg; // 图片base64
    captchaText.value = result.data.captchaText; // 验证码文字（前端自己用来比对）
  }else {//失败
    ElMessage.error('获取验证码失败');
  }
};
</script>

<template>
  <div class="login-container">
    <div class="login-card">
      <!-- 左侧区域 -->
      <div class="left-panel">
        <h1 class="title">十方智育后台系统</h1>
        <img src="../assets/logo.png" alt="Logo" class="logo-image" />
      </div>
      <!-- 右侧区域 -->
      <div class="right-panel">
        <el-form :model="loginForm" label-width="80px" class="login-form">
          <!-- 用户名 -->
          <el-form-item label="用户名">
            <el-input
              v-model="loginForm.username"
              placeholder="请输入用户名"
              clearable
              prefix-icon="User"
            />
          </el-form-item>

          <!-- 密码 -->
          <el-form-item label="密码">
            <el-input
              v-model="loginForm.password"
              type="password"
              placeholder="请输入密码"
              clearable
              prefix-icon="Lock"
              show-password
            />
          </el-form-item>

          <!-- 登录角色 -->
          <el-form-item label="登录角色">
            <el-select
              v-model="loginForm.position"
              placeholder="请选择角色"
              style="width: 100%"
            >
              <el-option
                v-for="item in roleOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <!-- 验证码 -->
          <el-form-item label="验证码">
            <div class="captcha-container">
              <el-input
                v-model= "userInputCaptcha"
                placeholder="请输入验证码"
                clearable
                prefix-icon="Check"
                style="width: 60%"
              />
              <div class="captcha-image" @click="refreshCaptcha" style="margin-left: 10px; cursor: pointer;">
                <img :src="captchaImg" alt="验证码" style="height: 40px;" v-if="captchaImg"/>
                <span v-else-if="!captchaImg">点击刷新验证码</span>
              </div>
            </div>
          </el-form-item>

          <!-- 按钮 -->
          <el-form-item>
            <el-button class="login-button" @click="login">登录</el-button>
          </el-form-item>
          <el-form-item>
            <el-button class="reset-button" @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<style scoped>
.login-container {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(135deg, #4b5e8c, #1e3a8a);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
}

.login-card {
  display: flex;
  width: 100%;
  max-width: 800px;
  min-height: 500px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(12px);
  overflow: hidden;
  animation: fadeIn 0.5s ease-in;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.left-panel {
  flex: 0 0 40%;
  background: linear-gradient(180deg, #ffffff, #e6f0ff);
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.right-panel {
  flex: 0 0 60%;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.title {
  font-size: 28px;
  font-weight: bold;
  color: #1e3a8a;
  text-align: center;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
}

.logo-image {
  max-width: 100%;
  max-height: 200px;
  object-fit: contain;
  position: absolute;
  top: 180px;
}

.login-form {
  margin-top: 20px;
}

.captcha-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.captcha-image {
  width: 40%;
  height: 40px;
  background: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  cursor: pointer;
  color: #666;
  font-size: 14px;
  text-align: center;
}

.login-button,
.reset-button {
  width: 100%;
  height: 48px;
  border-radius: 24px;
  font-size: 16px;
  font-weight: bold;
  margin: 10px 0;
  border: none;
  transition: transform 0.2s ease;
}

.login-button {
  background: linear-gradient(90deg, #409eff, #79bbff);
  color: white;
}

.login-button:hover {
  background: linear-gradient(90deg, #337ecc, #66aaff);
  transform: scale(1.02);
  color: white;
}

.reset-button {
  background: linear-gradient(90deg, #909399, #b3b7bc);
  color: white;
}

.reset-button:hover {
  background: linear-gradient(90deg, #787d82, #9fa3a9);
  transform: scale(1.02);
  color: white;
}
</style>
